<template>
  <view class="page">
    <view class="header">
      <view class="custom-header" :style="{ height: headerHeight + 'px', paddingTop: titleHeight + 'px' }">
        <view class="title" @click="goBack"><up-icon name="arrow-left" color="#fff" size="22px"></up-icon></view>
        <view><img src="../../static/logo.png" alt="logo" class="logo" /></view>
        <view class="box">
          <view class="topBox">
            <up-search
              v-model="keyword"
              placeholder="请输入您要查找的项目名"
              :clearabled="true"
              :show-action="true"
              action-text="取消"
              :animation="true"
              bg-color="#fff"
              @search="handleSearch"
            ></up-search>
          </view>
        </view>
      </view>
    </view>
    <!-- 页面内容 -->
    <view class="content" :style="{ marginTop: headerHeight + 'px' }">
      <view class="nowGoing">
        <view class="nowHeader">
          <view class="_tagDiv"></view>
          <p>查询结果</p></view
        >
        <view class="nowList">
          <up-empty
            v-show="isShow"
            :show="isShow"
            text="暂无查询结果"
            class="empty"
            mode="data"
            icon-color="#e6e6e6"
            text-color="#6fa0fc"
            icon-size="120"
          >
          </up-empty>
          <ActiveCard v-for="(item, index) in projectList" :key="index" :project="item" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import StuActiveCard from './components/StuActiveCard.vue'
import { searchProject } from '@/api/search'
import ActiveCard from '../../components/ActiveCard.vue'
import { ref, computed} from 'vue'
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}
// 双向绑定获取搜索内容
const keyword = ref('')
const isShow = ref(true)

// const router = useRouter()
//状态栏高度
const statusBarHeight = ref(0)
//胶囊按钮高度
const capsuleHeight = ref(0)
//胶囊按钮顶部距离
const capsuleTop = ref(0)
//标题的高度
const titleHeight = ref(0)
//计算头部高度
const headerHeight = computed(() => {
  // 胶囊按钮底部高度,胶囊到头部的高度+胶囊高度+额外给高度放下俩个块
  return capsuleTop.value + capsuleHeight.value + 120
})

// 在组件挂载时获取系统信息

const systemInfo = uni.getSystemInfoSync()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
capsuleHeight.value = menuButtonInfo.height
capsuleTop.value = menuButtonInfo.top
titleHeight.value = capsuleTop.value + 5
statusBarHeight.value = systemInfo.statusBarHeight ?? 44

const handleSearch = async () => {
  const searchWord = keyword.value.trim()
  const res = await searchProject(searchWord)
  projectList.value = res.data
  if (projectList.value.length > 0) {
    isShow.value = false
  }
  console.log('搜索内容：', res)
  // 在这里处理搜索逻辑，例如发送请求获取搜索结果
}
const projectList = ref()
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #eff0f4;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.custom-header {
  width: 100%;
  background: linear-gradient(to bottom, #4590f1, #eff0f4);
  display: flex;
  justify-content: left;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  color: #fff;
  font-size: 16px;
  padding-left: 12px;
}

.logo {
  width: 200px;
  height: 45.2px;
  margin-left: 12px;
  margin-top: 15px;
}

.box {
  display: flex;
  justify-content: center;
}

.topBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  border-radius: 8px;
  margin: 10px;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eff0f4;
}

.nowGoing {
  min-height: 240px;
  background-color: #ffffff;
  width: 95%;
  border-radius: 12px;
  margin-bottom: 18px;
}

.nowHeader {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 15px;
  margin-top: 20px;
  color: #74a5ef;
  letter-spacing: 1px;
}

._tagDiv {
  width: 5px;
  height: 20px;
  background-color: #6a97e6;
  border-radius: 3px;
  margin-right: 10px;
}

.nowList {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
}
</style>
